<template>
  <div id="app" v-cloak>
    <TopNav :isBack="isBack"></TopNav>
    <transition name="fade">
      <keep-alive :include="include">
        <router-view class="app-view" @setBack="setBack" @removeBack="removeBack"></router-view>
      </keep-alive>
    </transition>
    <BottomNav></BottomNav>
  </div>
</template>

<script>
import TopNav from './components/TopNav.vue'
import BottomNav from './components/BottomNav.vue'
export default {
  name: 'App',
  created: function(){
    console.info('SFC Made By Tian')
  },
  components: {
    TopNav,
    BottomNav,
  },
  data () {
    return {
      include: [],
      isBack: false
    }
  },
  watch: {
    $route(to, from) {
      if (to.meta.keepAlive) {
        !this.include.includes(to.name) && this.include.push(to.name);
      }
      if (from.meta.keepAlive && to.meta.deepth < from.meta.deepth) {
        var index = this.include.indexOf(from.name);
        index !== -1 && this.include.splice(index, 1);
      }
    }
  },
  methods:{
    setBack() {
      this.isBack = true
    },
    removeBack () {
      this.isBack = false
    }
  }
}
</script>

<style>
[v-cloak] {
  display: none;
}

html,body{
  background-color: #39434f;
}

p, ul {
  margin: 0;
  padding: 0;
}

#app {
  width: 100%;
  height: 100vh;
  background-color: #39434f;
}

.app-view{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-active {
  opacity: 0
}

.mint-spinner-snake{
  margin: 0 auto;
}
</style>
